<template>
  <div class="a_z_userman">
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>系统管理</a-breadcrumb-item>
      <a-breadcrumb-item>用户管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 搜索栏 -->
    <search class="search"></search>
    <!-- 用户管理表格 -->
    <!-- 整体的操作 -->
    <div class="btns">
      <a-button type="primary" icon="user-add" @click="show = !show">新增</a-button>
      <!-- <a-button type="default" icon="edit">修改</a-button> -->
      <!-- <a-button type="danger" icon="delete">删除</a-button> -->
    </div>
    <a-table :columns="columns" rowKey='index' :data-source="data">
      <a slot="status" slot-scope="status">
        <a-tag color="red" v-if="status == 0">已启用</a-tag>
        <a-tag color="red" v-else>未启用</a-tag>
      </a>
      <a slot="id" slot-scope="id">
        <a-button type="link" icon="edit" @click="edit(id)">编辑</a-button>
        <a-divider type="vertical" />
        <a-popconfirm
          title="你确定你要删了他？"
          ok-text="是的"
          cancel-text="算了"
          @confirm="confirm(id)"
          @cancel="cancel"
        >
          <a-button type="link" icon="delete">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>
    <!-- 待添加的用户信息 -->
    <a-card class="addInfo" v-if="show" style="width: 400px">
      <a-form-model :model="form" :label-col="{span:6}" :wrapper-col="{span:18}">
        <a-form-model-item label="用户名">
          <a-input v-model="form.username" placeholder="请输入用户名" />
        </a-form-model-item>
        <a-form-model-item label="密码">
          <a-input v-model="form.password" placeholder="请输入密码" />
        </a-form-model-item>
        <a-form-model-item label="确认密码">
          <a-input v-model="form.confirm" placeholder="请确认密码" />
        </a-form-model-item>
        <a-form-model-item label="手机号码">
          <a-input v-model="form.phonenum" placeholder="请输入手机号码" />
        </a-form-model-item>
        <a-form-model-item label="用户类型">
          <a-radio-group v-model="form.role">
            <a-radio v-for="(item,index) in role" :key="index" :value="item.id">{{item.name}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-radio-group v-model="form.status">
            <a-radio value="1">禁止</a-radio>
            <a-radio value="0">启用</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item class="submit">
          <a-button class="submit" @click="submit" type="primary">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import search from '../../components/setting/search.vue'
import { getUserlist, getRole, addUser } from '../../api/manage.js'
const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    width: 200
  },
  {
    title: '手机号',
    dataIndex: 'phonenum',
    key: 'phonenum',
    width: 200
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    key: 'roleName',
    width: 200
  },
  {
    title: '当前状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    width: '100'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: '200'
  },
  {
    title: '操作',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' }
  }
]
export default {
  components: {
    search
  },
  data () {
    return {
      data: [],
      columns,
      form: {},
      role: [],
      show: false
    }
  },
  async mounted () {
    this.initUserlist()
    const res = await getRole()
    this.role = res.data
  },
  computed: {
    // rowSelection () {
    //   return {
    //     onChange: (selectedRowKeys, selectedRows) => {
    //       console.log(
    //         `selectedRowKeys: ${selectedRowKeys}`,
    //         'selectedRows: ',
    //         selectedRows
    //       )
    //     },
    //     getCheckboxProps: (record) => ({
    //       props: {
    //         disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //         name: record.name
    //       }
    //     })
    //   }
    // }
  },
  methods: {
    confirm (e) {
      console.log(e)
    },
    cancel () {
      alert('算了我心软了')
    },
    // 初始化用户列表数据
    async initUserlist () {
      const res = await getUserlist()
      this.data = res.data
    },
    async submit () {
      const res = await addUser(this.form)
      console.log(res)
      this.$notification.open({
        message: '提示',
        description: res.msg,
        duration: 1000
      })
      this.show = !this.show
      this.initUserlist()
    },
    edit (text) {
      console.log(text)
    }
  }
}
</script>

<style lang='scss' scoped>
.search {
  margin-top: 1em;
}
.btns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1em;
  margin-bottom: 1em;
  .ant-btn {
    margin-right: 1em;
  }
}
.addInfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  .submit {
    width: 100%;
  }
}
</style>
